<template>
	<u-popup @close="close" v-model="value" :popup="false" :mask-custom-style="{ background: 'rgba(0, 0, 0, .3)' }" border-radius="24" :safe-area-inset-bottom="true" mode="bottom">
		<view class="gift-container">
			<view class="gift-header">送礼给TA</view>
			<view class="gift-body">
				<swiper class="gift-group" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item class="gift-group-item" v-for="(group, gIndex) in giftGroupList" :key="gIndex">
						<view class="gift-list">
							<view class="gift-item" @tap.stop="selectGift" :data-gift-id="item.gift_id" v-for="(item, iIndex) in group" :key="iIndex" :data-gift="item">
								<view class="gift-chunk" :class="{ activity: activityId == item.gift_id }">
									<image class="gift-image" :src="item.thumb.file_path" mode="aspectFit"></image>
									<view class="gift-name">{{ item.gift_name }}</view>
									<view class="gift-money">{{ item.money }}</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="gift-foot">
				<view class="gift-foot-left" @tap.stop="toPage" data-url="/pageUser/recharge/index">
					<view class="gift-foot-left-text">{{ userInfo.balance }}</view>
					<u-icon name="arrow-right" color="#F85962" size="30"></u-icon>
				</view>
				<view class="gift-foot-btn" :class="{ disable: totalMoney > userInfo.balance }" @tap.stop="givingGift">赠送</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
import Tools from '@/utils/Tools.js';
export default {
	props: {
		value: {
			default: false,
			type: Boolean
		},
		from: {
			default: 1,
			type: [Number, String]
		},
		toUser: {
			default: 0,
			type: [Number, String]
		}
	},
	data() {
		return {
			giftDataList: [],
			activityId: 3,
			giftNum: 1
		};
	},
	watch: {
		show: {
			handler(newValue, oldValue) {
				if (newValue) {
					this.refreshUserInfo();
				}
			},
			immediate: true
		}
	},
	computed: {
		giftGroupList: function() {
			const giftGroupList = [];
			const dataList = this.$u.deepClone(this.giftDataList);
			for (var i = 0; i < dataList.length; i += 8) {
				giftGroupList.push(dataList.slice(i, i + 8));
			}
			return giftGroupList;
		},
		totalMoney: function() {
			for (let i = 0; i < this.giftDataList.length; i++) {
				if (this.giftDataList[i].gift_id == this.activityId) {
					return this.giftDataList[i].money * this.giftNum;
				}
			}
		}
	},
	mounted() {
		this.$u.api.getGiftCabinetList().then(res => {
			this.giftDataList = res.data.list.data;
		});
	},
	methods: {
		close() {
			this.$emit('input', false);
		},
		givingGift() {
			if (this.totalMoney <= this.userInfo.balance) {
				this.$u.api
					.giveGiftsToUser(this.activityId, this.toUser)
					.then(res => {
						if (res.code == 200) {
							this.close();
							for (let i = 0; i < this.giftDataList.length; i++) {
								if (this.giftDataList[i].gift_id == this.activityId) {
									this.$emit('onSuccess', { gift: this.giftDataList[i] });
								}
							}
						} else {
							Tools.showError('赠送失败，请稍后重试！');
						}
					})
					.catch(e => {
						Tools.showError('赠送失败，请稍后重试！');
					});
			}
		},
		selectGift(e) {
			this.activityId = e.currentTarget.dataset.giftId;
			setTimeout(() => {
				if (this.totalMoney > this.userInfo.balance) {
					this.navigateTo({
						url: '/pageUser/recharge/index'
					});
				}
			}, 0);
		}
	}
};
</script>

<style lang="scss">
.gift-container {
	width: 750rpx;
	height: 638rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 24rpx;
	.gift-header {
		height: 84rpx;
		position: relative;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		font-size: 26rpx;
		font-weight: 300;
		color: rgba(248, 89, 98, 1);
		// &::after {
		// 	content: '';
		// 	position: absolute;
		// 	bottom: 0;
		// 	left: 0;
		// 	right: 0;
		// 	bottom: 0;
		// 	height: 1rpx;
		// 	background-color: #f85962;
		// }
	}
	.gift-body {
		height: 474rpx;
		.gift-group {
			width: 750rpx;
			height: 474rpx;
			.gift-group-item {
				width: 750rpx;
				height: 474rpx;
				.gift-list {
					width: 750rpx;
					height: 474rpx;
					display: flex;
					flex-wrap: wrap;
					.gift-item {
						width: 187.5rpx;
						height: 237rpx;
						padding: 6rpx 8rpx;
						.gift-chunk {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							height: 100%;
							width: 100%;
							border-radius: 8rpx;
							border: rgba($color: $theme-main-color, $alpha: 0) 1rpx solid;
							transition: border 0.2s ease;
							&.activity {
								border: rgba($color: $theme-main-color, $alpha: 1) 1rpx solid;
							}
							.gift-image {
								width: 100rpx;
								height: 100rpx;
							}
							.gift-name {
								margin-top: 6rpx;
								height: 40rpx;
								font-size: 28rpx;
								font-weight: 400;
								color: $theme-main-color;
								line-height: 40rpx;
							}
							.gift-money {
								height: 30rpx;
								font-size: 20rpx;
								font-weight: 400;
								color: #999;
								line-height: 30rpx;
								&::after {
									content: '币';
								}
							}
						}
					}
				}
			}
		}
	}
	.gift-foot {
		padding: 0 30rpx;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.gift-foot-left {
			color: #999;
			display: flex;
			align-items: center;
			font-size: 24rpx;
			.gift-foot-left-text {
				&::after {
					content: '充值';
					color: $theme-main-color;
					padding-left: 10rpx;
					font-size: 34rpx;
				}
			}
		}
		.gift-foot-btn {
			padding: 0 31rpx;
			height: 50rpx;
			background: linear-gradient(180deg, rgba(237, 79, 93, 1) 0%, rgba(251, 122, 142, 1) 100%);
			color: #fff;
			font-size: 26rpx;
			line-height: 50rpx;
			border-radius: 25rpx;
			&.disable {
				filter: grayscale(100%);
				filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
				opacity: 0.8;
			}
		}
	}
}
</style>
